<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { usePublicHooks } from './hooks'
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
const { locale } = useTranslationLang();
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = withDefaults(defineProps<FormProps>(), {
    formInline: () => ({
        higherDeptOptions: [],
        ParentId: 0,
        Name: "",
        Code: "",
        Sort: null,
        Status: 1,
        Value: "",
        Note: ""
    })
});

const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);

function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
    <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="70px"
        :label-position="locale === 'en' ? 'top' : 'right'">
        <el-row :gutter="30">
            <re-col>
                <el-form-item :label="t('Dict.parentMenu')">
                    <el-cascader class="w-full" v-model="newFormInline.ParentId"
                        :options="newFormInline.higherDeptOptions" :props="{
                            value: 'Id',
                            label: 'Name',
                            children: 'Children',
                            emitPath: false,
                            checkStrictly: true
                        }" clearable filterable>
                    </el-cascader>
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item :label="t('Dict.dictName')" prop="Name">
                    <el-input v-model="newFormInline.Name" clearable />
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item :label="t('Dict.dictCode')" prop="Code">
                    <el-input v-model="newFormInline.Code" clearable />
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item :label="t('Dict.dictValue')" prop="Value">
                    <el-input v-model="newFormInline.Value" clearable />
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item :label="t('Dict.instructions')" prop="Note">
                    <el-input v-model="newFormInline.Note" clearable />
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item :label="t('Dict.sort')" prop="Sort">
                    <el-input-number v-model="newFormInline.Sort" :min="0" :max="9999" controls-position="right" />
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item :label="t('Dict.status')" prop="Status">
                    <el-switch v-model="newFormInline.Status" inline-prompt :active-value="1" :inactive-value="0"
                        :active-text="t('Dict.enable')" :inactive-text="t('Dict.disable')" :style="switchStyle" />
                </el-form-item>
            </re-col>
        </el-row>
    </el-form>
</template>

<style lang="scss" scoped>
.el-radio {
    margin-right: 16px;
}
</style>
